<template>
<!--  <view class="page">-->
<!--    <view class="form">-->
<!--      <form-item title="昵称" more @clickItem="jumpTo(1)">-->
<!--        <template v-slot:value>-->
<!--          <view class="form-value">-->
<!--            里斯slot-->
<!--          </view>-->
<!--        </template>-->
<!--        <template v-slot:menu>-->
<!--          <view class="form-value" style="background-color: #4cd964;width: 100rpx;height: 100rpx;">-->
<!--            里斯slot-->
<!--          </view>-->
<!--        </template>-->
<!--      </form-item>-->

<!--    <form-item title="昵称1" more @clickItem="jumpTo(1)">-->
<!--      <template v-slot:value>-->
<!--        <view class="form-value">-->
<!--          里斯slot-->
<!--        </view>-->
<!--      </template>-->
<!--    </form-item>-->
<!--    </view>-->
<!--  </view>-->

  <view class="page">
    <view class="page-body">
      <view class="form-item" v-for="i in 40">
        <form-slider height="184rpx">
          <view class="body-item">
            <view class="tag">
              <view class="tag-name">张三{{i}}已认领</view>
            </view>
            <view class="left-icon">
              <image class="img" src="https://oss.suning.com/srcfews/lsywd/snmp-health/member/mum84.png"></image>
            </view>
            <view class="content">
              <view class="up">
                <view class="data-label">血压</view>
                <view class="data-value">120/40</view>
                <view class="data-unit">mmHg</view>
                <view class="data-warn">高血压</view>
              </view>
              <view class="down">
                <view class="data-label">心率</view>
                <view class="data-value">90</view>
                <view class="data-unit">bpm</view>
                <view class="data-time">2025-11-21 17:00:00</view>
              </view>
            </view>
          </view>
          <template v-slot:menu>
            <view style="display: flex;flex-direction: row;height: inherit">
              <view style="width: 160rpx; height: 100%;
          margin-left: 24rpx;
          background-color: #D4413F;
          font-size: 28rpx;
          color: #FFFFFF;
          text-align: center;
          font-weight: 500;
          display: flex;align-items: center;justify-content: center;"
                    @click="demoClick('删除' + i)">
                删除
              </view>

              <view style="width: 136rpx; height: 100%;
          background-color: #EB8029;
          font-size: 28rpx;
          color: #FFFFFF;
          text-align: center;
          font-weight: 500;
          display: flex;align-items: center;justify-content: center;"
                    @click="demoClick('更换认领' + i)">
                更换认领
              </view>
            </view>
          </template>
        </form-slider>
      </view>

<!--      <form-picker defaultValue="2" :max-show-rows="5" :option-list="optionList" @change="change"></form-picker>-->
<!--      <form-swiper>-->
<!--      </form-swiper>-->
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const optionList = [{label:'111', value: '1'}, {label:'222', value: '2'},
  {label:'333', value: '3'}]
const change = (e)=>{
  console.log('index change', e)
}

const demoClick = (e)=>{
  console.info('demoClick', e)
}
</script>
<style lang="scss" scoped>
.page{
  background-color: var(--background-color);

  scroll-behavior: smooth;
  overflow-y: scroll;
  //-ms-overflow-style: none;  /* IE and Edge */
  //scrollbar-width: none;  /* Firefox */

  height: 100vh;
}
.page::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}
.page-body{
  width: 702rpx;
  margin-left: 24rpx;
  .form-item{
    margin-bottom: 24rpx;
  }
}
.body-item{
  position: relative;
  box-sizing: border-box;
  height: 184rpx;
  width: 702rpx;
  background-color: #FFFFFF;
  border-radius: 24rpx;
  display: flex;
  flex-direction: row;
  .tag{
    position: absolute;
    height: 42rpx;
    top: 0;
    right: 0;
    background: #E9ECEE;
    border-radius: 0 24rpx 0 24rpx;
    padding-left: 24rpx;
    padding-right: 24rpx;

    .tag-name{
      font-size: 22rpx;
      color: #636668;
      letter-spacing: 0;
      text-align: right;
      font-weight: 400;
    }
  }

  .left-icon{
    width: 120rpx;
    height: 100%;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .img{
      width: 84rpx;
      height: 84rpx;
    }
  }

  .content{
    width: 558rpx;
    height: 136rpx;
    border-radius: 0 24rpx 24rpx 0;
    margin-top: 24rpx;

    .up{
      width: 558rpx;
      height: 62rpx;
      display: flex;
      flex-direction: row;
      align-items: flex-end;
    }
    .down{
      margin-top: 12rpx;
      width: 558rpx;
      height: 62rpx;
      display: flex;
      flex-direction: row;
      align-items: flex-end;
    }
  }
}


.data-label{
  font-size: 26rpx;
  color: #212425;
  letter-spacing: 0;
  line-height: 36rpx;
  font-weight: 400;
}
.data-value{
  margin-left: 6rpx;
  font-size: 48rpx;
  color: #43CD7F;
  letter-spacing: 0;
  font-weight: 400;
}
.data-unit{
  margin-left: 6rpx;
  font-size: 26rpx;
  color: #636668;
  letter-spacing: 0;
  line-height: 36rpx;
  font-weight: 500;
}
.data-warn{
  margin-left: 6rpx;
  font-size: 26rpx;
  color: #EB8029;
  letter-spacing: 0;
  line-height: 36rpx;
  font-weight: 400;
}
.data-time{
  flex: 1;
  font-size: 26rpx;
  color: #919599;
  letter-spacing: 0;
  text-align: right;
  line-height: 36rpx;
  font-weight: 400;
}
</style>
<!--<style lang="scss">-->
<!--.parent{-->
<!--  width: 600rpx;-->
<!--  height: 100rpx;-->
<!--  margin: 75rpx;-->
<!--  display: flex;-->
<!--  flex-direction: row;-->
<!--  overflow: hidden;-->
<!--  background-color: #919599;-->
<!--  .child{-->
<!--    flex: none;-->
<!--    width: 600rpx;-->
<!--    height: 100rpx;-->
<!--    background-color: green;-->
<!--    transform: translateX(v-bind('move'));-->

<!--  }-->
<!--  .child1{-->
<!--    flex: none;-->
<!--    width: 100rpx;-->
<!--    height: 100rpx;-->
<!--    background-color: blue;-->
<!--    transform: translateX(v-bind('move'));-->
<!--  }-->
<!--}-->
<!--.page {-->
<!--  height: 100vh;-->
<!--  background: #F3F3F3;-->
<!--}-->
<!--.form{-->
<!--  width: 690rpx;-->
<!--  margin-left: 30rpx;-->
<!--  background: #FFFFFF;-->
<!--  .form-label{-->
<!--    font-size: 32rpx;-->
<!--    color: #919599;-->
<!--    line-height: 44rpx;-->
<!--    font-weight: 400;-->
<!--  }-->
<!--  .form-value{-->
<!--    font-size: 32rpx;-->
<!--    color: #212425;-->
<!--    text-align: right;-->
<!--    line-height: 44rpx;-->
<!--    font-weight: 400;-->
<!--  }-->
<!--}-->
<!--</style>-->
